<div id="register" class="animate form login_form">
	<section class="login_content">
		<form action="javascript:void(0);">
			<h1>Create Account</h1>
			<div>
				<input type="text" v-model="user.userName" class="form-control" placeholder="Username" required="" />
			</div>
			<div>
				<input
					type="password"
					v-model="user.password"
					class="form-control"
					placeholder="Password"
					required=""
				/>
			</div>
			<div>
				<a @click="register()" class="btn btn-default submit" href="javascript:void(0);">Submit</a>
			</div>

			<div class="clearfix"></div>

			<div class="separator">
				<p class="change_link">
					Already a member ?
					<a href="/login" class="to_register"> Log in </a>
				</p>

				<div class="clearfix"></div>
				<br />

				<div>
					<h1><i class="fa fa-paw"></i> SFAC</h1>
					<p>Copyright © 2022 JiangHu. All rights reserved. 蜀ICP备 2021031966号-1</p>
				</div>
			</div>
		</form>
	</section>
</div>

<script>
	var registerVue = new Vue({
		el: "#register",
		data: {
			user: {
				userName: "",
				password: "",
			},
		},
		methods: {
			register: function () {
				if (this.user.userName == "" || this.user.password == "") {
					layer.msg("请输入用户名和密码。", { icon: 0 });
					return;
				}

				var self = this;
				$.ajax({
					url: "/api/user",
					type: "post",
					contentType: "application/json",
					data: JSON.stringify(self.user),
					success: function (result) {
						if (result.status == 500) {
							layer.msg(result.message, { icon: 0 });
						} else {
							window.location.href = "/login";
						}
					},
					error: function (errorMsg, result) {
						layer.error(result, { icon: 0 });
					},
				});
			},
		},
	});
</script>
